<template>
  <div class="index">
    <div class="left-inner">
      <img alt="" class="left-logo" src="@/assets/images/logo.png" />
      <div class="left-title">欢迎使用工程报告写作平台</div>
      <div class="left-subtitle">AI编写可行性研究报告、项目申请报告。</div>
      <div class="left-intro">告诉我新建项目的基础信息，帮你一键生成复杂且详细的报告方案，还可以生成word提供下载。</div>
      <swiper height="300px" />
    </div>
  </div>
</template>

<script>
  import Swiper from '@/components/Swiper.vue'

  export default {
    name: 'Index',
    components: { Swiper },
  }
</script>

<style scoped lang="scss">
  .index {
    height: calc(100vh - 100px);
    background: url('~@/assets/login_images/background.jpg') no-repeat;
    background-size: cover;
  }
  .left-logo {
    width: 300px;
    margin: 0 0 30px;
  }
  .left-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    .left-title {
      font-size: 34px;
      font-weight: 600;
      margin: 0 0 15px;
    }

    .left-subtitle {
      font-size: 16px;
      font-weight: 600;
    }

    .left-intro {
      white-space: nowrap;
      margin: 0 0 20px;
    }
  }

  ::v-deep .el-carousel {
    margin: auto;
  }
</style>
